'use strict';
angular.module('zg-directive', [])
    .directive("circle",function(){
        return {
            restrict:'E',
            replace:true,
            scope:false,
            controller:'detailsCtrl',
            link:function(scope,ele,attrs,controller){
                if(ele.length===1){
                    var node = ele[0];
                    var width = '320';
                    var height = '200';
                    var canvas = document.createElement('canvas');
                    canvas.setAttribute('width',width);
                    canvas.setAttribute('height',height);
                    canvas.setAttribute('circle-model',node.getAttribute('circle-model'));
                    node.parentNode.replaceChild(canvas,node);
                    
                              // Create the content of the canvas
                              //包括新建和重绘;
                            var ed = canvas.getContext('2d');
                            var param = scope.dd;
                            ed.clearRect(0, 0, width, height);
                            ed.lineWidth = 1,
                            //外圆
                            ed.fillStyle="#ff9b42";
                            ed.beginPath();
                            ed.arc(160,100,90,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            ed.strokeStyle="white";
                            ed.stroke();

                            ed.fillStyle="#ff4e60";
                            ed.beginPath();
                            ed.arc(160,100,75,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            ed.strokeStyle="white";
                            ed.stroke();

                            ed.fillStyle="#34d376";
                            ed.beginPath();
                            ed.arc(160,100,60,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            ed.strokeStyle="white";
                            ed.stroke();

                            ed.fillStyle="#8f4991";
                            ed.beginPath();
                            ed.arc(160,100,45,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            ed.strokeStyle="white";
                            ed.stroke();
                            //内圆
                            ed.fillStyle="#ffffff";
                            ed.beginPath();
                            ed.arc(160,100,30,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            ed.strokeStyle="white";
                            ed.stroke();
                            //////////////////////////////////////////////////////////
                            //////////////////////////////////////////////////////////
                            //左上文字
                            ed.fillStyle="#333";
                            ed.font="14px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("156㎡",10,20);

                            ed.fillStyle="#878787";
                            ed.font="10px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("面积",10,40);
                            //////////////////////////////////////
                            //右上文字
                            ed.fillStyle="#333";
                            ed.font="14px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("望京商业圈",240,20);

                            ed.fillStyle="#878787";
                            ed.font="10px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("位置",240,40);
                            //////////////////////////////////////
                            //左下文字
                            ed.fillStyle="#333";
                            ed.font="14px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("560万",10,175);

                            ed.fillStyle="#878787";
                            ed.font="10px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("价格",10,195);
                            //////////////////////////////////////
                            //右下文字
                            ed.fillStyle="#333";
                            ed.font="14px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("560万",260,175);

                            ed.fillStyle="#878787";
                            ed.font="10px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText("价格",260,195);
                            ////////////////////////////////////////////////////////////
                            ////////////////////////////////////////////////////////////
                            //左上线条
                            ed.beginPath();
                            ed.moveTo(10,25);
                            ed.lineTo(80,25);
                            ed.lineTo(100,45);
                            ed.strokeStyle="#c4c4c4";
                            ed.stroke();

                            ed.fillStyle="#ffffff";
                            ed.beginPath();
                            ed.arc(100,45,2,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            //////////////////////////////////////
                            //右上线条
                            ed.beginPath();
                            ed.moveTo(310,25);
                            ed.lineTo(235,25);
                            ed.lineTo(205,50);
                            ed.strokeStyle="#c4c4c4";
                            ed.stroke();

                            ed.fillStyle="#ffffff";
                            ed.beginPath();
                            ed.arc(205,50,2,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            //////////////////////////////////////
                            //右下线条
                            ed.beginPath();
                            ed.moveTo(10,180);
                            ed.lineTo(80,180);
                            ed.lineTo(130,122);
                            ed.strokeStyle="#c4c4c4";
                            ed.stroke();

                            ed.fillStyle="#ffffff";
                            ed.beginPath();
                            ed.arc(130,122,2,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            //////////////////////////////////////
                            //右下线条
                            ed.beginPath();
                            ed.moveTo(310,180);
                            ed.lineTo(235,180);
                            ed.lineTo(203,130);
                            ed.strokeStyle="#c4c4c4";
                            ed.stroke();

                            ed.fillStyle="#ffffff";
                            ed.beginPath();
                            ed.arc(203,130,2,0,Math.PI*2,true);
                            ed.closePath();
                            ed.fill();
                            ////////////////////////////////////////////////////////////
                            ////////////////////////////////////////////////////////////
                            //中间数据
                            ed.fillStyle="#333";
                            ed.font="bold 16px Microsoft Yahei,Helvetica Neue,Helvetica,Arial,STHeiTi,sans-serif";
                            ed.fillText(param,145,107); 
                    //if end
                }
            }
        }
    })
    .directive("line",function(){
        return {
            restrict:'E',
            replace:true,
            scope:false,
            compile:function(templateElement,templateAttributes,transclude){
                if(templateElement.length===1){
                    var node = templateElement[0];
                    var width = '320';
                    var height = '200';
                    var canvas = document.createElement('canvas');
                    canvas.setAttribute('width',width);
                    canvas.setAttribute('height',height);
                    // canvas.setAttribute('circle-model',node.getAttribute('circle-model'));
                    node.parentNode.replaceChild(canvas,node);
                    return {
                      //pre start 
                      pre: function preLink(scope, instanceElement, instanceAttributes, controller) {
                              // Create the content of the canvas
                              //包括新建和重绘;
                              

                      },
                      //pre end
                      
                      //post start
                      post: function postLink(scope, instanceElement, instanceAttributes, controller) {
                        var dg=canvas.getContext("2d");
                        //曲线图
                        var rgb=dg.createLinearGradient(0,160,0,0);
                        ///////////////////////////////////////////////////
                        //横线
                        dg.beginPath();
                        dg.moveTo(10,50);
                        dg.lineTo(310,50);
                        dg.strokeStyle="#efefef";
                        dg.stroke();

                        dg.beginPath();
                        dg.moveTo(10,100);
                        dg.lineTo(310,100);
                        dg.strokeStyle="#efefef";
                        dg.stroke();

                        dg.beginPath();
                        dg.moveTo(10,150);
                        dg.lineTo(310,150);
                        dg.strokeStyle="#efefef";
                        dg.stroke();
                        //////////////////////////////////////////////////
                        //曲线
                        rgb.addColorStop("0","#59cde6");
                        rgb.addColorStop("0.2","#ffae00");
                        rgb.addColorStop("0.3","#ffae00");
                        rgb.addColorStop("0.5","#ff0054");
                        rgb.addColorStop("0.6","#ff0054");
                        rgb.addColorStop("0.9","#ff0054");
                        rgb.addColorStop("1.0","#59cde6");
                        dg.beginPath();
                        dg.lineWidth=5;
                        dg.moveTo(10,180);
                        dg.arcTo(30,140,90,0,30);
                        dg.quadraticCurveTo(50,50,65,120,0);
                        dg.quadraticCurveTo(80,180,100,70,0);
                        dg.quadraticCurveTo(110,0,130,80,0);
                        dg.quadraticCurveTo(140,110,150,90,0);
                        dg.quadraticCurveTo(170,60,180,110,0);
                        dg.quadraticCurveTo(185,160,210,115,0);
                        dg.quadraticCurveTo(230,60,250,150,0);
                        dg.quadraticCurveTo(250,160,270,160,0);
                        dg.quadraticCurveTo(310,160,310,180,0);
                        dg.strokeStyle=rgb;
                        dg.stroke();
                        ////////////////////////////////////////
                        //文字
                        dg.fillStyle="#fb8916";
                        dg.font="14px Helvetica";
                        dg.fillText("67,700元/平米",130,45);
                        ////////////////////////////////////////
                        //圆点标记
                        dg.fillStyle="#ff048c";
                        dg.globalAlpha=0.7;
                        dg.shadowBlur=8;
                        dg.shadowColor="#ff048c";
                        dg.beginPath();
                        dg.arc(111,38,5,0,Math.PI*2,true);
                        dg.closePath();
                        dg.fill();
                      }
                      //post end
                    };
                    //if end
                }
            }
        }
    })
